<script setup>
import { ref,onMounted } from 'vue'
import { Clock } from '@element-plus/icons-vue'
import { submitSystemSettings,getSystemSettings } from '@/api/systemsettings'  // 引入 API
import { ElMessage } from 'element-plus'

const settings = ref({
  approvalTimeout: 1,             // 主管未审批超时时间（小时）
  unreadNotificationReminder: 1,  // 员工未读通知提醒时间（小时）
  notificationMethods: ['system'],
  smtpConfig: {
    host: 'smtp.example.com',
    port: 465,
    ssl: true
  }
})

// 统一的提交设置函数
const submitSettings = async (type) => {
  try {
    let field, id, successMessage;
    
    if (type === 'approval') {
      field = 'approvalTimeout';
      id = 1;
      successMessage = '审批设置修改成功！';
    } else if (type === 'notification') {
      field = 'unreadNotificationReminder';
      id = 2;
      successMessage = '通知设置修改成功！';
    }

    console.log(`打印修改${type === 'approval' ? '审批' : '通知'}时间`, settings.value[field]);
    
    const response = await submitSystemSettings({ 
      approvalTimeout: settings.value[field], 
      id 
    });
    
    console.log(`${type === 'approval' ? '审批' : '通知'}设置提交成功`, response.data);
    ElMessage.success(successMessage);
  } catch (error) {
    console.error(`提交${type === 'approval' ? '审批' : '通知'}设置失败:`, error);
    ElMessage.error('操作失败，请重试！');
  }
}

// 提交审批设置的函数
const submitApprovalSettingsForm = async () => {
  await submitSettings('approval');
}

// 提交通知设置的函数
const submitNotificationSettingsForm = async () => {
  await submitSettings('notification');
}
// 从后端获取系统设置的函数
const fetchSettings = async () => {
  try {
    const response = await getSystemSettings()
    console.log('系统时间',response)
    settings.value.approvalTimeout = response.data.data[0].approvalTimeout     
    settings.value.unreadNotificationReminder = response.data.data[1].approvalTimeout 
  } catch (error) {
    console.error('获取系统设置失败:', error);
    // 您可以在这里添加错误处理逻辑，例如显示错误消息
  }
}

onMounted(() => {
  fetchSettings()
})
</script>

<template>
  <div>
    <h2>系统设置</h2>

    <el-card class="setting-card">
      <el-tabs>
        <el-tab-pane :icon="Clock" label="审批设置">
          <el-form>
            <el-form-item label="审批超时时间">
              <div class="form-item-content">
                <div class="time-input">
                  <el-input-number v-model="settings.approvalTimeout" :min="1" :max="72" />
                  <span class="unit">小时</span>
                </div>
                <el-button type="primary" @click="submitApprovalSettingsForm" class="submit-button-inline">提交</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane :icon="Clock" label="通知设置">
          <el-form>
            <el-form-item label="员工未读通知提醒时间">
              <div class="form-item-content">
                <div class="time-input">
                  <el-input-number v-model="settings.unreadNotificationReminder" :min="1" :max="72" />
                  <span class="unit">小时</span>
                </div>
                <el-button type="primary" @click="submitNotificationSettingsForm" class="submit-button-inline">提交</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style scoped>
.setting-card {
  max-width: 100%;
}

.unit {
  margin-left: 5px;
  color: #666;
}

.form-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.time-input {
  display: flex;
  align-items: center;
  flex: 1; /* 确保时间输入框占据大部分空间 */
}

.submit-button-inline {
  margin-left: 20px; /* 可根据需要调整间距 */
}
</style>